<template>
  <div class="left-top">
    <div class="headers_sale_content">
      <div class="headers_right">
        <span>服务项目</span>
      </div>
      <div class="headers_left"></div>
    </div>
    <div class="content">
      <div class="content_search">
        <div class="content_search_left">
          <div class="search_item">
            <div class="label">客户名称:</div>
            <div>
              <el-input
                v-model="customerName"
                placeholder="请输入客户名称"
                style="width: 100%"
              ></el-input>
            </div>
          </div>
          <div class="search_item">
            <div class="label">项目名称:</div>
            <div>
              <el-input
                v-model="projectName"
                placeholder="请输入项目名称"
                style="width: 100%"
              ></el-input>
            </div>
          </div>
          <div class="search_item">
            <div class="label">项目状态:</div>
            <div style="width: 100%">
              <el-select v-model="projectStatus" placeholder="选择项目状态">
                <el-option label="中标" value="1"></el-option>
                <el-option label="流标" value="2"></el-option>
              </el-select>
            </div>
          </div>
          <div class="search_item">
            <div class="label">项目编号:</div>
            <div>
              <el-input
                v-model="projectCode"
                placeholder="请输入项目编号"
                style="width: 100%"
              ></el-input>
            </div>
          </div>
        </div>

        <div class="button_group">
          <el-button
            @click="search"
            style="background: #1e4398; border: none; color: #ffffff"
            >查询</el-button
          >
          <el-button @click="reset">重置</el-button>
        </div>
      </div>
    </div>
    <div class="reset" @click="todetail()">
      <span>刷新</span>
    </div>
    <div class="table"  ref="customTable">
      <el-table
      :height="tableHeight" 
        :data="tableData"
        style="width: 100%"
        stripe
        :cell-style="cellStyle"
        :header-cell-style="headerCellStyle"
      >
        <el-table-column label="" width="50">
          <template slot-scope="scope">
            {{ scope.$index + 1 }}
          </template>
        </el-table-column>
        <el-table-column width="50">
          <template slot-scope="scope">
            <div
              @click="toggleImage(scope.row)"
              style="cursor: pointer"
              class="imgbox"
            >
              <img
                v-if="scope.row.isCollect == '1'"
                src="../../assets/img/select.png"
                style="width: 100%; height: 100%"
              />
              <img
                v-else
                src="../../assets/img/noselect.png"
                style="width: 100%; height: 100%"
              />
            </div>
          </template>
        </el-table-column>
        <el-table-column label="项目名称" min-width="80">
          <template slot-scope="scope">
            <span
              class="projectname"
              @click="handleClick(scope.row)"
              style="cursor: pointer; transition: color 0.3s"
            >
              {{ scope.row.xmmc }}
            </span>
          </template>
        </el-table-column>

        <el-table-column label="客户名称" min-width="80">
          <template slot-scope="scope">
            <span
              class="projectname"
              @click="handleClick(scope.row)"
              style="cursor: pointer; transition: color 0.3s"
            >
              {{ scope.row.khmc }}
            </span>
          </template>
        </el-table-column>
        <el-table-column
        prop="xmbh"
        label="项目编号"
          min-width="100"
      ></el-table-column>
        <el-table-column label="项目状态" width="180">
          <template slot-scope="scope">
            <div
              v-if="scope.row.xmzt == ''"
              style="
                display: flex;
                align-items: center;
                justify-content: center;
              "
            >
              <img
                @click="handleImageClick(scope.row, '1')"
                v-if="scope.row.xmzt !== '2'"
                class="typeimg"
                src="../../assets/img/zhong.png"
                style="margin-right: 5px"
              />
              <img
                @click="handleImageClick(scope.row, '2')"
                v-if="scope.row.xmzt !== '1'"
                class="typeimg"
                src="../../assets/img/liu.png"
              />
            </div>
            <div
              v-else
              style="
                display: flex;
                align-items: center;
                justify-content: center;
              "
            >
              <img
                v-if="scope.row.xmzt !== '2'"
                class="typeimg"
                src="../../assets/img/zhongimg1.png"
                style="margin-right: 5px"
              />
              <img
                v-if="scope.row.xmzt !== '1'"
                class="typeimg"
                src="../../assets/img/liuimg1.png"
              />
            </div>
          </template>
        </el-table-column>
        <el-table-column
          prop="processType"
          label="最新流程类型"
          min-width="80"
        ></el-table-column>
        <el-table-column
          prop="adjustTime"
          label="最新调整时间"
          min-width="120"
        ></el-table-column>
        <el-table-column
          class="tbals"
          v-for="(dynamicCol, index) in dynamicColumns"
          :key="index"
          :label="dynamicCol.processName"
           :min-width="60"
          :prop="dynamicCol.sign"
        >
          <template slot-scope="scope">
            <div
              class="line"
              @click="handleClicks(scope.row[dynamicCol.sign])"
              :class="
                getLineClass(
                  scope.row[dynamicCol.sign]
                    ? scope.row[dynamicCol.sign].processState
                    : null
                )
              "
            ></div>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="notice_box_bottom_table_fy" v-if="totalItems > 10">
      <my-pagination
        :current-page="currentPage4"
        :page-size="pageSize"
        :page-sizes="pageSizes"
        :total="totalItems"
        @size-change="onSizeChange"
        @current-change="onPageChange"
      />
    </div>
  </div>
</template>
  
  <script>
import { getNavbar } from "@/api/index";
import MyPagination from "../../components/MyPagination.vue";
export default {
  data() {
    return {
      currentPage4: 1,
      pageSize: 10,
      tableHeight: 400, // 默认表格高度
      pageSizes: [10, 20, 30, 40],
      totalItems: 300,
      hovered: false,
      image1: "path/to/image1.png", // 图片1的路径
      image2: "path/to/image2.png", // 图片2的路径
      customerName: "",
      projectCode:'',
      projectName: "",
      projectStatus: "",
      dynamicColumns: [
        { label: "动态列1", prop: "dynamicValue1", width: "10" },
        { label: "动态列2", prop: "dynamicValue2", width: "100" },
      ],
      tableData: [
        {
          projectName: "项目A",
          customerName: "客户1",
          projectStatus: "进行中",
          latestProcessType: "审批",
          latestAdjustmentTime: "2024-10-01",
          imageToggle: false,
          dynamicValue1: "动态值1-1",
          dynamicValue2: "",
        },
        {
          projectName: "项目B",
          customerName: "客户2",
          projectStatus: "已完成",
          latestProcessType: "交付",
          latestAdjustmentTime: "2024-09-25",
          imageToggle: true,
          dynamicValue1: "动态值1-1",
          dynamicValue2: "",
        },
        {
          projectName: "项目C",
          customerName: "客户3",
          projectStatus: "已取消",
          latestProcessType: "暂停",
          latestAdjustmentTime: "2024-09-15",
          dynamicValue1: "动态值1-1",
          dynamicValue2: "动态值1-2",
        },
        {
          projectName: "项目D",
          customerName: "客户4",
          projectStatus: "进行中",
          latestProcessType: "设计",
          latestAdjustmentTime: "2024-10-05",
        },
        {
          projectName: "项目E",
          customerName: "客户5",
          projectStatus: "已完成",
          latestProcessType: "测试",
          latestAdjustmentTime: "2024-09-20",
        },
        {
          projectName: "项目F",
          customerName: "客户6",
          projectStatus: "进行中",
          latestProcessType: "开发",
          latestAdjustmentTime: "2024-10-10",
        },
        {
          projectName: "项目G",
          customerName: "客户7",
          projectStatus: "已完成",
          latestProcessType: "验收",
          latestAdjustmentTime: "2024-09-30",
        },
        {
          projectName: "项目H",
          customerName: "客户8",
          projectStatus: "进行中",
          latestProcessType: "规划",
          latestAdjustmentTime: "2024-10-15",
        },
        {
          projectName: "项目I",
          customerName: "客户9",
          projectStatus: "已取消",
          latestProcessType: "终止",
          latestAdjustmentTime: "2024-09-18",
        },
        {
          projectName: "项目J",
          customerName: "客户10",
          projectStatus: "进行中",
          latestProcessType: "实施",
          latestAdjustmentTime: "2024-10-12",
        },
      ],
    };
  },
  components: {
    MyPagination,
  },
  mounted() {
    this.getlist();
    this.getMainProcesslist();
    this.$nextTick(() => {
      this.addRoundedCorners();
    });
    // window.addEventListener("resize", this.handleResize);
    this.getTableHeight(); //初始设置一下
  },
  beforeDestroy() {
    window.removeEventListener("resize", this.handleResize);
  },
  methods: {
    handleResize() {
      // 在这里根据窗口大小调整样式或状态
      // 例如，调整面板的高度、宽度等
 
      this.getTableHeight();//窗口变化之后重新设置一下
    },
 
    // 获取表格可视区域高度，方便固定表头
    getTableHeight() {
      this.$nextTick(() => {

        let height = this.$refs.customTable.clientHeight || 0;
   
        if (height > 0) {
          this.tableHeight = height + 100; //获取高度之后去除表头高度和分页条高度
        }
    
      })
    },
    addRoundedCorners() {
      const rows = this.$el.querySelectorAll(
        ".el-table__body-wrapper tbody tr"
      );
      rows.forEach((row) => {
        const lines = row.querySelectorAll(".line");
        if (lines.length > 0) {
          lines[0].style.borderTopLeftRadius = "10px";
          lines[0].style.borderBottomLeftRadius = "10px";
        }
      });
    },
    todetail() {
      this.getlist();
    },
    handleImageClick(row, imageType) {
      const message =
        imageType === "1"
          ? "是否确认进行【中标】操作?"
          : "是否确认进行【流标】操作?";
      this.$confirm(` ${message}`, "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          var param = {
            sid: window.sid,
            cmd: "com.bono.portal.order.updateState",
            type: imageType,
            xmbh: row.xmbh,
          };
          getNavbar(param).then((res) => {
           if(res.data.startUrl !=''){
            window.open(res.data.startUrl, "_blank");
           }

            // this.shortCuts = res.data.shortCuts;
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    toggleImage(row) {
      row.isCollect = row.isCollect === "1" ? "0" : "1";
      var param = {
        sid: window.sid,
        cmd: "com.bono.portal.order.collect",
        isCollect: row.isCollect,
        xmbh: row.xmbh,
      };
      getNavbar(param).then((res) => {
   

        // this.shortCuts = res.data.shortCuts;
      });
      // 你可以在这里添加其他逻辑，比如切换 isCollect 状态等
    },
    handleClicks(item) {
 
      window.open(item.openUrl, "_blank"); // 在新标签页中打开链接
    },
    getLineClass(processState) {
  
      switch (processState) {
        case "active":
          return "line active";
        case "end":
          return "line end";
        case "no":
          return "line no";
       
      }
    },
    //获取列表数据

    getMainProcesslist() {
      var param = {
        sid: window.sid,
        cmd: "com.bono.portal.sale.getMainProcesslist",
        company: sessionStorage.getItem("company"),
      };
      getNavbar(param).then((res) => {

        this.dynamicColumns = res.data.saleProcess;
        // this.shortCuts = res.data.shortCuts;
      });
    },
    //获取列表数据

    getlist() {
      var param = {
        sid: window.sid,
        cmd: "com.bono.portal.order.getOrderList",
        xmzt: this.projectStatus,
        xmmc: this.projectName,
        xmbh: this.projectCode,
        khmc: this.customerName,
        pageSize: this.pageSize,
        currentPage: this.currentPage4,
        company: sessionStorage.getItem("company"),
      };
      getNavbar(param).then((res) => {
   
        const { result, msg, data, id } = res;
        this.tableData = res.data.orderList;
        this.totalItems = res.data.totalCount;

        // this.shortCuts = res.data.shortCuts;
      });
    },
    onSizeChange(size) {

      this.pageSize = size;
      this.getlist();
      // 处理页面大小变化
    },
    onPageChange(page) {

      this.currentPage4 = page;
      this.getlist();
      // 处理当前页变化
    },
    handleClick(row) {

      let xmbh = row.xmbh;

      this.$router.push({
        path: "/orderDetail",
        query: { xmbh }, // 将项目编号作为查询参数
      });
    },
    cellStyle() {
      return {
        color: "#666666", // 字体颜色
        fontSize: "13px", // 字体大小
        textAlign: "center",

        backGround: "#EEF1F7", // 背景颜色
      };
    },
    headerCellStyle() {
      return {
        color: "#333333" /* 表头文字颜色（白色） */,
        fontWeight: "700" /* 表头文字加粗 */,
        fontSize: "13px" /* 表头文字大小 */,
        textAlign: "center",
      };
    },
    search() {
      this.getlist();
    },
    reset() {
      this.customerName = "";
      this.projectName = "";
      this.projectStatus = "";
    },
  },
};
</script>

<style scoped >
/deep/.el-table__body-wrapper{
  min-height: 420px !important;
  background: #fafafa;
}
/deep/ .el-table__body{
  width: 100% !important;
}
/deep/ .el-table .cell {
  padding-right: 0 !important;
  padding-left: 0 !important;
}
.line.active {
  background: orange !important; /* 橙色 */
}
/deep/.el-table__body-wrapper ::-webkit-scrollbar {
  display: none; /* 隐藏滚动条 */
}
/deep/.el-table__body-wrapper {
  scrollbar-width: none; /* 隐藏滚动条 */
}

.line.end {
  background: linear-gradient(180deg, #e3f64b, #95d11c, #70b00f) !important;
}

.line.no {
  background: #dddddd !important;
}
.projectname {
  transition: color 0.3s;
  color: #587eb9;
  font-size: 14px;
} 

.el-table .cell:hover .projectname {
  color: #587eb9;
}
.line {
  height: 20px;

  background: #dddddd;
  cursor: pointer;
  transition: height 0.3s, background-color 0.3s;
}



.line:hover {
  height: 22px; /* 悬浮时的高度 */
}

.typeimg {
  width: 49px;
  height: 20px;
  cursor: pointer;
}
.imgbox {
  width: 16px;
  height: 16px;
}
.label {
  font-family: PingFang SC;
  font-weight: 500;
  font-size: 13px;
  color: #333333;
  margin-bottom: 4px;
}
.table {


}
/* 隐藏滚动条 - 适用于 Chrome 和 Safari */
.table::-webkit-scrollbar {
  display: none; /* 隐藏滚动条 */
}

/* 隐藏滚动条 - 适用于 Firefox */
.table {
  scrollbar-width: none; /* 隐藏滚动条 */
}

.left-top {
  padding: 20px;
  background: rgba(255, 255, 255, 0.7);
  box-shadow: 0px 2px 6px 0px rgba(139, 157, 175, 0.1);
  border-radius: 10px;
}

.headers_sale_content {
  padding-bottom: 15px;
  display: flex;
  justify-content: space-between;
}
.headers_sale_content .headers_left span {
  font-family: "PingFang SC", sans-serif;
  font-weight: bold;
  font-size: 18px;
  color: #323333;
}
.headers_right {
  display: flex;
}
.headers_right span {
  font-family: "PingFang SC", sans-serif;
  font-weight: bold;
  font-size: 18px;
  color: #323333;
}
.headers_right .headers_right_title {
  font-family: PingFang SC;
  font-weight: 500;
  font-size: 14px;
  color: #666666;
  margin-left: 15px;
  cursor: pointer;
  transition: background 0.3s; /* 添加过渡效果 */
}
.headers_left_select {
  margin-right: 20px;
}
.headers_left {
  display: flex;
  align-items: center;
}

.headers_left /deep/.el-input__icon {
  height: 29px;
}
.headers_left_select /deep/.el-input__icon {
  height: 24px;
}
.year-picker {
  margin-right: 20px;
}
.headers_left_input {
  margin-right: 20px;
}
.headers_left_input /deep/ .el-input__icon {
  line-height: 29px !important;
}
.headers_left_more {
  font-family: PingFang SC;
  font-weight: 400;
  font-size: 14px;
  color: #1e4398;
  cursor: pointer;
}
.carous_img {
  width: 100%;
  height: 100%;
}

.headers_sale_content span {
  border-left: 4px solid #1e4398;
  padding-left: 9px;
}

.content {
  margin-top: 10px; /* 内容与标题之间的间距 */
  padding: 4px 30px;
  background: rgba(255, 255, 255, 0.6);
}
.content_search {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.search_item {
  margin-bottom: 15px;
  margin-right: 10px;
  width: 200px;
}
.search_item /deep/.el-select > .el-input {
  width: 100% !important;
}
.label {
  display: inline-block;
  width: 100px; /* 调整宽度 */
}
.button_group {
}
.content_search_left {
  display: flex;
}
.reset {
  margin: 10px 0;
}

.reset span {
  background: #ffffff;
  border-radius: 3px 2px 2px 3px;
  border: 1px solid #ededed;
  padding: 2px 12px;
  cursor: pointer;
}
/deep/.el-table,
.el-table__expanded-cell {
  background-color: transparent;
}

/deep/.el-table tr {
  background-color: #eef1f7 !important;
}

/deep/.el-table--enable-row-transition .el-table__body td,
.el-table .cell {
  background-color: #eef1f7;
}

.notice_box_bottom_table_fy {
  text-align: right;
  margin-top: 10px;
}
</style>
    